<template>
  <div class="max">
    <my-header :backBtn="true">
			<div slot="title">
				教师考勤
			</div>
		</my-header>
    <div class="tl cont-nof">
      <div class="weui-cell weui-cell_select weui-cell_select-after">
        <div class="weui-cell__hd">
          <label class="weui-label">状态</label>
        </div>
        <div class="weui-cell__bd">
          <select class="weui-select" @change="queryFn" v-model="params.status">
            <option :value="item.id" v-for="item in attendType">{{item.name}}</option>
          </select>
        </div>
      </div>
      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">日期</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" @change="queryFn" type="date" v-model="params.day" style="font-size: 1.6rem;"/>
        </div>
      </div>
      <div class="weui-panel">
        <div class="weui-loadmore weui-loadmore_line" v-if="list.length===0">
          <span class="weui-loadmore__tips">暂无数据</span>
        </div>
        <div class="weui-cells">
          <a class="weui-cell weui-cell_access" href="javascript:;" v-for="item in list">
            <div class="weui-cell__bd">
              <p>{{item.teacherName}}（{{item.status}}）</p>
            </div>
            <div class="weui-cell__ft">{{item.day}}</div>
          </a>
        </div>
        <div class="weui-panel__ft" v-if="params.current<params.pages" @click="loadmore">
          <a href="javascript:void(0);" class="weui-cell weui-cell_access weui-cell_link">
            <div class="weui-cell__bd">查看更多</div>
            <span class="weui-cell__ft"></span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import PullTo from 'vue-pull-to';
  import mySelect from '@/components/select.vue'

  export default {
    components: {
      mySelect,
      PullTo
    },
    data() {
      let time = this.$getNowDate('date');
      return {
        attendType: [
          {id: '', name: '全部'},
          {id: '正常上班', name: '正常上班'},
          {id: '迟到', name: '迟到'},
          {id: '旷工', name: '旷工'},
          {id: '早退', name: '早退'},
          {id: '正常下班', name: '正常下班'},
        ],
        params: {
          current: 1, //当前页页码
          size: 10, //一页显示几条数据
          pages: 0,
          total: 0,
          status: '',
          day: time
        },
        list: [],
      }
    },
    methods: {
      loadmore(loaded) {
        this.params.size += 5;
        this.queryFn();
      },
      queryFn() {
        this.$http.fetchAtd(this.params).then(resp => {
          let data = resp.data;
          this.list = data.records;
          this.params.current = data.current;
          this.params.size = data.size;
          this.params.pages = data.pages;
          this.params.total = data.total
        })
      },

    },
    mounted() {
      this.queryFn();
    },
    created() {

    }

  }
</script>

<style scoped>
  .attendCount {
    padding: 1rem;
    box-sizing: border-box;
  }

  .select-rasult {
    padding: 1rem 0;
    color: #B2B2B2;
  }

  .attendCount-table {
    height: calc(100% - 18rem);
    width: 100%;
    overflow: auto;
  }

  .count-table thead {
    background: #D9D9D9;
    padding: 0.5rem 0;
  }

  .count-table td {
    padding: 0.5rem 0;
  }

  .count-table tr {
    border-bottom: 1px solid #D9D9D9;
  }

  .attendType {
    width: calc(100% - 8rem);
    margin-bottom: 1rem;
    flex-wrap: wrap;
  }

  .attendType span {
    font-size: 1.4rem;
    margin: 0 0.2rem;
    padding: 0.1rem 0.5rem;
    border-radius: 5px;
  }

  .attendType span.active {
    background: #2aa7e1;
    color: #fff;
  }
</style>
